<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ include file="/common/includes.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>编辑用户所属角色</title>
<%String path = request.getContextPath(); %>
<link rel="stylesheet" href="<%=path %>/css/main.css" type="text/css" />
	<%@ include file="/common/metaInput.jsp" %> 
 <style type="text/css">           
     .topArea{ text-align: center;font-size: 12px;}
 </style>

</head>
<body>
<div id="tab1">
	<div class="l-tab-links">
	    <ul style="left: 0px; ">
	       <li class="l-selected" tabid="tabitem1"><a>角色权限</a><div class="l-tab-links-item-left"></div><div class="l-tab-links-item-right"></div></li>
	       <li tabid="tabitem2"><a>角色用户</a><div class="l-tab-links-item-left"></div><div class="l-tab-links-item-right"></div></li>
	    </ul>
    </div>
	<div id="layout1" title="角色权限" >
			<div position="top" class="topArea">
				<div ><h4>${tempRole.description }:的权限</h4></div>
				<div>
					<input type="button" value="确定" id="okBtn">
					<input type="button" value="取消" id="cancelBtn">
				</div>
			</div>
            <div position="left" title="已有角色">
            	<div id="hasRoleGrid"></div>
            </div>
            <div position="center" title="操作">
            	<div class="switch_area">
            		<div class="left2right" id="left2right"></div>
            		<div class="right2left" id="right2left"></div>
            	</div>
            </div>
	        <div position="right" title="未分配角色">
	        	<div id="noRoleGrid"></div>
	        </div>  

       </div> 
       <div title="角色用户" id="layout2">
       		<div position="top" class="topArea">
				<div ><h4>具有<label style="color:red;">${tempRole.description }</label>角色的用户</h4></div>
				<div>
					<input type="button" value="关闭" id="user_cancelBtn">
				</div>
			</div>
            <div position="center" title="已有角色">
            	<div id="hasUserGrid"></div>
            </div>
            
       </div>
 </div>
<script type="text/javascript">
	var api = frameElement.api, W = api.opener , D = W.document;
	$(function(){		
		UserRoleGrid.initPage();
		$('#left2right').click(function(){
			UserRoleGrid.left2right();
		});
		$('#right2left').click(function(){
			UserRoleGrid.right2left();
		});
		$('#okBtn').click(function(){
			UserRoleGrid.submitRole();
		});
		$('#cancelBtn').click(function(){
			api.close();
		});
		$('#user_cancelBtn').click(function(){
			api.close();
		});
		$('#tab1 li').click(function(){
			$('.l-selected').removeClass();
			$(this).addClass('l-selected');
			var tabid = $(this).attr('tabid');
			if(tabid == 'tabitem1'){
				$('#layout1').css('display' , '');
				$('#layout2').css('display' , 'none');
			}else{
				$('#layout1').css('display' , 'none');
				$('#layout2').css('display' , '');
			}
		});
		$('.switch_area > div').hover(function(){ //over
			var cname = this.className;
			if(this.className.indexOf('_shi') < 0){
				$(this).removeClass(this.className);
				$(this).addClass(cname + '_shi');
			}
		},function(){  //out
			var cname = this.className;
			var index = cname.indexOf('_shi');
			if(index > 0){
				$(this).removeClass(this.className);
				$(this).addClass(cname.substring(0 ,index ));
			}
		});
		
	});
	var UserRoleGrid = function(){
		var roleId = '${tempRole.id}';
		var hasPms = ${hasPms};
		var noPms = ${noPms};
		var users = ${users};
		var url = "${ctx}/security/role/updateRolePermission.do";
		var hasManager = null;
		var noManager = null;
		var userManager = null;
		return{
			initPage : function(){
				$("#layout1").ligerLayout({leftWidth: '46%', centerWidth: '5%', rightWidth: '47%' });
				$("#layout2").ligerLayout({center: '100%'});
				UserRoleGrid.initGrid();
				
			},
			initGrid : function(){
				hasManager = $("#hasRoleGrid").ligerGrid({
		            columns: [{ display: '名称', name: 'name',width  : 200, align: 'left' },
				           	  { display: '描述', name: 'description',width  : 180, align: 'left'}],
				    data: hasPms, pageSize: 300,
				    width: '100%', height: '98%', checkbox: true,rownumbers:true
				});
				noManager = $("#noRoleGrid").ligerGrid({
		            columns: [{ display: '名称', name: 'name',width  : 200, align: 'left' },
				           	  { display: '描述', name: 'description',width  : 180, align: 'left'}],
				    data: noPms, pageSize: 300,
				    width: '100%', height: '98%', checkbox: true,rownumbers:true
				});
				userManager = $("#hasUserGrid").ligerGrid({
		            columns: [{ display: '用户名', name: 'name',type: 'string',width  : 250 ,hide : false},
				           	  { display: '姓名', name: 'realName',type: 'string',width  : 150,hide : false}
		            	],
				    data: users, pageSize: 300,
				    width: '100%', height: 350, checkbox: false,rownumbers:true
				});				
			},
			left2right : function(){
				hasManager.deleteSelectedRow();
				var rows = hasManager.getSelectedRows();
				
				for(var i = 0 ; i < rows.length; i++){
					var o = rows[i];
					noManager.addRow({id:o.id , name:o.name , description : o.description});
				}				
			},
			right2left : function(){
				noManager.deleteSelectedRow();
				var rows = noManager.getSelectedRows();
				for(var i = 0 ; i < rows.length; i++){
					var o = rows[i];
					hasManager.addRow({id:o.id , name:o.name , description : o.description});
				}
			},
			submitRole : function(){
				var data = hasManager.getData();				
		//		var addData = hasManager.getAdded(); 		//新增的角色
		//		var deleteData = hasManager.getDeleted(); 	//解除掉的角色
				$.ajax({
					url : url,type:'POST',dataType : 'json',
					data : {service : 'updateRolePermission' , 
							roleId : roleId , 
							pmsData : JSON.stringify(data)},
				 	success : function(data , textStatus , jqXHR){
				 		if(data.resultFlag){
				 			$.ligerDialog.success('更新角色的权限成功！' , function(yes){
				 				//api.close();
				 			});
				 		}else{
				 			$.ligerDialog.success('更新角色的权限失败！');
				 		}				 		
				 	}
				});
			}
		};
		
	}();
</script>
</body>
</html>